<template>
    <div class="app-container">
        <div class="filter-container">
            <el-form class="demo-form-inline">
                <el-form-item label="时间:" style="margin-bottom: 0;">
                    <el-date-picker
                        v-model="date"
                        type="daterange"
                        placeholder="选择日期"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        style="width: 250px"
                        />
                    <el-button @click="setMonthDate(1)">近一月</el-button>
                    <el-button @click="setMonthDate(3)">近三月</el-button>
                    <el-button @click="setMonthDate(6)">近半年</el-button>
                    <el-button @click="setMonthDate(12)">近一年</el-button>
                </el-form-item>
                <el-form-item label="课程:" style="margin-bottom: 0;">
                    <el-tag v-for="(course, index) in selectedCourses" :key="index" class="mr-5" size="mini" closable @close="removeCourse(index)">
                        {{ course.name }}
                    </el-tag>
                     <el-button icon="el-icon-plus" size="mini" @click="courseVisible = true">选择</el-button>
                </el-form-item>
                <el-form-item label="老师:" style="margin-bottom: 0;">
                    <el-tag v-for="(teacher, index) in selectedTeachers" :key="index" class="mr-5" size="mini" closable @close="removeTeacher(index)">
                        {{ teacher.name }}
                    </el-tag>
                     <el-button icon="el-icon-plus" size="mini" @click="teacherVisible = true">选择</el-button>
                </el-form-item>
            </el-form>
            <select-course multiple :visible.sync="courseVisible" @select="res => selectedCourses = res" />
            <select-teacher multiple :visible.sync="teacherVisible" @select="res => selectedTeachers = res" />
        </div>
        <div class="table-container">
            <!-- 数据统计 -->
            <div style="background: #d5d5d5;" class="p-20 mb-20">
                <el-row :gutter="0">
                    <el-col :span="6">
                        <el-statistic title="消课数量" :value="count.course_num" />
                    </el-col>
                    <el-col :span="6">
                        <el-statistic title="消课金额" :value="count.course_money" />
                    </el-col>
                    <el-col :span="6">
                        <el-statistic title="出勤率" :value="count.attendance_rate" />
                    </el-col>
                    <el-col :span="6">
                        <el-statistic title="排课次数" :value="count.arrange_num" />
                    </el-col>
                </el-row>
            </div>
            <!-- 数据展示 -->
            <el-table :data="tableData" border fit highlight-current-row header-cell-class-name="table-header">
                <el-table-column prop="student_name" label="学员" width="100" />
                <el-table-column prop="teacher_name" label="老师" width="100" />
                <el-table-column prop="course_name" label="课程" />
                <el-table-column prop="class_name" label="班级" />
                <el-table-column prop="course_num" label="消课数量" width="100" />
                <el-table-column prop="course_money" label="消课金额" width="100" />
                <el-table-column prop="result_text" label="考勤" width="60" />
                <el-table-column prop="created_at" label="时间" width="180" />
            </el-table>
        </div>
    </div>
</template>
<script>
import { Loading } from 'element-ui'
import SelectCourse from '../components/SelectCourse.vue'
import SelectTeacher from '../components/SelectTeacher.vue'
import dataApi from '@/api/data'

export default {
    name: 'CourseCount',
    components: {
        SelectCourse,
        SelectTeacher
    },
    data() {
        return {
            date: [],
            courseVisible: false,
            selectedCourses: [],
            teacherVisible: false,
            selectedTeachers: [],
            tableData: [],
            count: {
                course_num: 0,
                course_money: 0,
                attendance_rate: 0,
                arrange_num: 0
            }
        }
    },
    watch: {
        date: {
            handler(newVal, oldVal) { this.getData() },
            deep: true
        },
        selectedCourses: {
            handler(newVal, oldVal) { this.getData() },
            deep: true
        },
        selectedTeachers: {
            handler(newVal, oldVal) { this.getData() },
            deep: true
        }
    },
    created() {
        this.getData()
    },
    methods: {
        getData() {
            const begin_date = this.date[0]
            const end_date = this.date[1]
            const teachers = []
            const courses = []
            this.selectedTeachers.forEach(teacher => { teachers.push(teacher.id) })
            this.selectedCourses.forEach(course => { courses.push(course.id) })
            const loading = Loading.service({
                lock: true,
                text: '加载中...',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            dataApi.course({ begin_date, end_date, teachers, courses }).then(res => {
                loading.close()
                const data = res.data
                this.count = {
                    course_num: 0,
                    course_money: 0,
                    attendance_rate: 0,
                    arrange_num: 0
                }
                const arranges = []
                let total_course_num = 0
                data.forEach(item => {
                    if (item.result === 1 || item.result === 2) {
                        this.count.course_num += item.course_num
                        this.count.course_money += item.course_money
                    }

                    item.result_text = item.result <= 2 ? '正常' : '缺勤'
                    total_course_num += item.course_num
                    arranges.push(item.arrange_id)
                    // this.count.attendance_rate += item.attendance_rate
                    // this.count.arrange_num += item.arrange_num
                })
                console.log(this.count)
                this.tableData = data
                this.count.course_money = this.count.course_money.toFixed(2) * 1
                this.count.arrange_num = [...new Set(arranges)].length
                this.count.attendance_rate = total_course_num === 0 ? 0 : (this.count.course_num / total_course_num * 100).toFixed(2) * 1
            })
        },
        removeCourse(index) {
            this.selectedCourses.splice(index, 1)
        },
        removeTeacher(index) {
            this.selectedTeachers.splice(index, 1)
        },
        setMonthDate(monthsAgo) {
            const currentDate = new Date()
            // 当天的日期 XXXX-XX-XX
            const currentYear = currentDate.getFullYear()
            const currentMonth = String(currentDate.getMonth() + 1).padStart(2, '0')
            const currentDay = String(currentDate.getDate()).padStart(2, '0')
            const currentDateStr = `${currentYear}-${currentMonth}-${currentDay}`

            const targetDate = new Date(currentDate)
            targetDate.setMonth(currentDate.getMonth() - monthsAgo)
            // 设置为该月的第一天
            targetDate.setDate(1)

            // 格式化为 YYYY-MM-DD
            const year = targetDate.getFullYear()
            const month = String(targetDate.getMonth() + 1).padStart(2, '0')
            const day = String(targetDate.getDate()).padStart(2, '0')

            this.date = [`${year}-${month}-${day}`, currentDateStr]
            console.log(this.date)
        }
    }
}
</script>
